<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>debounce 演示</title>
</head>

<body>
    <input type="text" id="input1">
    <script>
        // 每次输入值都会在console中打印对应的value
        const input1 = document.getElementById('input1');
        // let timer = null;
        // input1.addEventListener('keyup', function () {
        //     if (timer) {
        //         clearTimeout(timer)
        //     }
        //     timer = setTimeout(() => {
        //         // 模拟触发 change 事件
        //         console.log(input1.value);

        //         // 清空定时器
        //         timer = null;
        //     }, 500);

        // })
        // // 期望的是每次输完数据，等个0.几秒，再触发输出请求

        function debounce(fn, delay = 500) {
            // timer 是在闭包中的
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    // 这里使用箭头函数，this和arguments从外继承来，若使用普通函数则需用词法作用域
                    fn.apply(this, arguments)
                    // fn()
                    // 如果使用 fn 的话，再调用监听函数的话，e就会失效
                }, delay);
            }
        }
        input1.addEventListener('keyup', debounce(function (e) {
            //因为使用箭头函数，所以this指向上下文，此时this和input1相同，所以input1.value和this.value的值相同，arguments用于获取具体按下的键
            console.log(input1.value);
            console.log(this);
            console.log(this.value);
            console.log(arguments);
            console.log(e.target);
        }, 600));
    </script>
</body>

</html>